<template>
  <div class="detail">
    
    <detail-nav-bar></detail-nav-bar>

    <my-scroll 
      class="myScroll"
      ref="myScroll">

      <detail-swiper :imageList="detailData.swiperImage"></detail-swiper>

      <detail-base-info :baseInfo="goodsBaseInfo"></detail-base-info>

      <detail-shop-info :shop="goodsShopInfo"></detail-shop-info>

      <detail-image-info :imagesInfo="goodsImageInfo"></detail-image-info>

      <detail-param-info :paramInfo="goodsParamInfo"></detail-param-info>

      <detail-comment-info :commentInfo="goodsCommentInfo.list[0]"></detail-comment-info>

      <goods-list :goodsList="goodsRecommendList"></goods-list>

    </my-scroll>

    <detail-bottom-bar></detail-bottom-bar>
    
    <!-- <transition name="scroll">
      <back-top @click.native="backTop" v-show="curPosition >= 1500" />
    </transition> -->

    <!-- 查询路由 -->
    <!-- <h1>{{this.$route.query.iid}}</h1> -->

  </div>
</template>

<script>

  import DetailNavBar from "./components/DetailNavBar.vue"
  import DetailSwiper from "./components/DetailSwiper.vue"
  import DetailBaseInfo from "./components/DetailBaseInfo.vue"
  import DetailShopInfo from "./components/DetailShopInfo.vue"
  import DetailImageInfo from "./components/DetailImageInfo.vue"
  import DetailParamInfo from "./components/DetailParamInfo.vue"
  import DetailCommentInfo from "./components/DetailCommentInfo.vue"
  import GoodsList from "@/components/common/goods-list/GoodsList.vue"
  import MyScroll from "@/components/common/MyScroll.vue"
  import DetailBottomBar from "./components/DetailBottomBar.vue"

  import { imgLoadedMixin } from "@/common/mixin.js"

  import detailData from "@/data/detailData.js"
  import { GoodsBaseInfo, Shop } from "@/network/detail.js"

  export default {

    name: "Detail",

    data() {
      return {
        iid: null,
        detailData: null,
        goodsBaseInfo: null,
        goodsShopInfo: null,
        goodsImageInfo: null,
        goodsParamInfo: null,
        goodsCommentInfo: null,
        goodsRecommendList: null,
      }
    },

    mixins: [imgLoadedMixin],

    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailImageInfo,
      DetailParamInfo,
      DetailCommentInfo,
      GoodsList,
      MyScroll,
      DetailBottomBar,
    },

    methods: {

      getIid() {
        this.iid = this.$route.query.iid;
      },

      getDetailData(iid) {
        this.detailData = detailData[iid];
        //分开获取商品的其他数据
        this.goodsBaseInfo = new GoodsBaseInfo(this.detailData.baseInfo);
        //获取店铺数据
        this.goodsShopInfo = new Shop(this.detailData.shopInfo);
        //获取商品图片数据
        this.goodsImageInfo = this.detailData.imagesInfo;
        //获取尺寸数据
        this.goodsParamInfo = this.detailData.paramInfo;
        //获取评论数据
        this.goodsCommentInfo = this.detailData.commentInfo;
        //获取推荐数据
        this.goodsRecommendList = this.detailData.recommendList;
      },

    },

    created() {
      this.getIid();
      // console.log(this.iid);
      this.getDetailData(this.iid);
      // console.log(this.detailData.goodsImage);
    },

    destroyed() {
      this.$bus.$off("imgLoaded", this.myRefresh);
    }

  }
</script>

<style scoped>

  .detail {
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 3;
    position: absolute;
  }

  .myScroll {
    position: absolute;
    top: 44px;
    width: 100%;
    bottom: 59px;
    overflow: hidden;
  }

/* vue的淡入淡出动画 */
.scroll-enter-active,
.scroll-leave-active {
  transition: all 0.3s;
}

.scroll-enter,
.scroll-leave-to {
  opacity: 0;
}

.scroll-enter-to,
.scroll-leave {
  opacity: 1;
}

</style>